<template>
	<view class="area-loca" @click="handlePublic" @longpress="publicLongpress">
		<view class="loca-wrapper">
			<!-- 头像区域 -->
			<view class="loca-avatar-box">
				<view class="loca-avatar-container">
					<image
						class="loca-user-avatar"
						:src="chatItem.avatar || '/static/logoGroup.png'"
						mode=""
						alt="邻里头像"
						@error="chatItem.avatar = '/static/logoGroup.png'"
					></image>

					<!-- 在线状态指示器（可选，根据需求决定是否保留） -->
					<view class="loca-avatar-status" v-show="locationChange"></view>
				</view>
			</view>

			<!-- 名称与内容区域 -->
			<view class="loca-name-box">
				<view class="loca-name-row">
					<view class="loca-name-text">
						<view class="public-title">
							<view class="icon-box" :class="{ show: locationChange }"><uni-icons type="location-filled" size="20" color="#00aa00"></uni-icons></view>

							<text class="u-line-1 public-title-text">{{ '邻里' }}</text>
						</view>
					</view>
				</view>
				<view class="loca-content-text">
					<text class="name" v-if="chatItem.nicName">{{ chatItem.nicName +':'}}</text>
					<text>{{ chatItem.msg }}</text>
				</view>
			</view>

			<!-- 时间与未读计数区域 -->
			<view class="loca-right-box">
				<view class="loca-time">
					{{ formatMessageTime(chatItem.latestTime) || '刚刚' }}
				</view>
				<!-- 未读计数（仅当数量>0时显示） -->
				<view class="loca-count" v-if="chatItem.unreadCount > 0">
					<text>{{ chatItem.unreadCount > 99 ? '99+' : chatItem.unreadCount }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import formatMessageTime from '../utils/formatMessageTime';
import getFriendUserInfo from '../utils/getFriendUserInfo';

export default {
	name: 'publicBar',
	props: {
		publicChat: {
			type: Object,
			default: () => {}
		}
	},
	computed: {
		storeData() {
			return this.$store.state.msg;
		}
	},
	created() {
		uni.$on('locationChange', (res) => {
			if (res && res.longitude) {
				this.locationChange = !this.locationChange;
			}
		});
	},
	
	watch: {
		publicChat: {
			handler: async function (newval) {
			
				try {
				    if(!newval.sendUserId) return
					const info = await getFriendUserInfo(newval.sendUserId);
					this.chatItem = { ...newval, nicName: info.nicName };
		
				} catch (e) {
					console.error(e);
				}
			},deep:true,immediate: true
		}
	},

	data() {
		return {
			isLoading: false,
			locationChange: true,
			chatItem: {}
		};
	},

	destroyed() {
		uni.$off('locationChange');
	},
	methods: {
		formatMessageTime,
		handlePublic() {
			this.$emit('handlePublic');
		},
		publicLongpress() {
			this.$emit('publicLongpress');
		}
	}
};
</script>

<style lang="scss" scoped>
.area-loca {
	padding: 5rpx 15rpx;
	background-color: #ffffff;
	margin: 5rpx 20rpx;
	border-radius: 16rpx;
	gap: 5rpx;
	.loca-wrapper {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f5f5f5; /* 与联系人列表样式统一 */
		cursor: pointer; /* 提示可点击 */
		transition: background-color 0.2s;

		&:active {
			background-color: #f8f8f8; /* 点击时背景高亮 */
		}
	}

	/* 头像区域 */
	.loca-avatar-box {
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;

		.loca-avatar-container {
			position: relative;
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx; /* 圆形头像 */
			overflow: hidden; /* 裁剪超出部分 */

			.loca-user-avatar {
				width: 100%;
				height: 100%;
				object-fit: cover; /* 保持图片比例，填充容器 */
			}

			/* 在线状态指示器（小圆点） */
			.loca-avatar-status {
				position: absolute;
				top: 5rpx;
				right: 5rpx;
				width: 10rpx;
				z-index: 100;
				height: 10rpx;
				background-color: #00bc00;
				border-radius: 50%;
				//	border: 3rpx solid #55aaff; /* 白色边框，与背景区分 */
			}
		}
	}

	/* 名称与内容区域 */
	.loca-name-box {
		flex-grow: 1;
		min-width: 0; /* 解决文字过长时不换行的问题 */

		.loca-name-row {
			display: flex;
			align-items: center;
			margin-bottom: 8rpx;

			.loca-name-text {
				font-size: 30rpx;
				color: #333333;
				font-weight: 500;
				/* #ifndef APP-PLUS-NVUE */
				white-space: nowrap;
				/* #endif */
				overflow: hidden;
				text-overflow: ellipsis;
			}

			/* 消息标签（如置顶） */
			.loca-tag {
				font-size: 20rpx;
				color: #4a95df;
				background-color: #e8f3ff;
				padding: 2rpx 12rpx;
				border-radius: 12rpx;
				margin-left: 12rpx;
			}
		}

		.loca-content-text {
			font-size: 24rpx;
			color: #999999;
			/* #ifndef APP-PLUS-NVUE */
			white-space: nowrap;
			/* #endif */
			overflow: hidden;
			text-overflow: ellipsis;
			/* 多行省略（如需支持多行，可替换上方3行属性） */
			/* display: -webkit-box;
	      -webkit-line-clamp: 2;
	      -webkit-box-orient: vertical;
	      white-space: normal; */
		  .name{
			  color: #55aaff;
			  font-weight: 600;
		  }
		}
	}

	/* 时间与未读计数区域 */
	.loca-right-box {
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
		height: 80rpx; /* 与头像高度一致，保持垂直居中 */
		margin-left: 15rpx;

		.loca-time {
			font-size: 22rpx;
			color: #999999;
			/* #ifndef APP-PLUS-NVUE */
			white-space: nowrap;
			/* #endif */
		}

		/* 未读计数气泡 */
		.loca-count {
			font-size: 22rpx;
			align-self: flex-end;
			font-weight: 700;
			color: #ffffff;
			background-color: #00bc00; /* 红色气泡，突出未读 */
			width: fit-content;
			min-width: 40rpx;
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			border-radius: 18rpx; /* 胶囊形 */
			margin-top: 8rpx;
			padding: 0 10rpx;
		}
	}
}
.public-title {
	display: flex;
	.icon-box {
		width: 40rpx;
		visibility: hidden;
	}
	.icon-box.show {
		visibility: visible;
	}
}
.public-title-text {
	color: #55aaff;
}
</style>
